<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/system/userList' }">员工管理</el-breadcrumb-item>
        <el-breadcrumb-item>员工数据权限分配</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer userRolePage">
      <div class="user-file-image role-user">
        <div class="block-fx">
        <el-image style="width: 80px; height: 80px;border-radius:50%;overflow:hidden;">
          <!-- 默认图片 -->
          <div slot="error" class="image-slot">
            <img width="80" height="80" v-if="user.avatar" :src="user.avatar" />
            <img height="80" width="80" v-if="!user.avatar" src="@/assets/images/default-user-img.png" />
          </div>
        </el-image>
        </div>
        <div class="block-fx user-info">
          <h1>{{user.name}}</h1>
          <p>{{user.roleName}}</p>
        </div>
      </div>
    </div>
    <div class="mainContainer m-t20">
      <!-- 权限 -->
      <el-tabs class="custom-tab" v-model="activeName">
        <el-tab-pane label="社保参保地" name="first">
          <div class="role-box">
            <el-input class="role-search-box"
              placeholder="输入关键字进行过滤"
              size="medium"
              v-model="filterText"
            >
              <i style="line-height:36px;" class="iconfont iconsearch" slot="suffix"></i>
            </el-input>
            <el-tree
              :data="sociacAddrs"
              show-checkbox
              node-key="id"
              default-expand-all
              :default-checked-keys="socialIds"
              :props="defaultProps"
              :filter-node-method="filterNode"
              ref="tree"
            ></el-tree>
          </div>
        </el-tab-pane>
        <el-tab-pane label="公积金参保地" name="second">
          <div class="role-box">
          <el-input class="role-search-box"
                    placeholder="输入关键字进行过滤"
                    size="medium"
                    v-model="filterText1"
          >
            <i style="line-height:36px;" class="iconfont iconsearch" slot="suffix"></i>
          </el-input>
          <el-tree
                  :data="accfundAddrs"
                  show-checkbox
                  node-key="id"
                  default-expand-all
                  :default-checked-keys="accfundIds"
                  :props="defaultProps"
                  :filter-node-method="filterNode1"
                  ref="tree1"
          ></el-tree>
        </div>
        </el-tab-pane>
        <el-tab-pane label="服务公司" name="third">
          <div class="role-box">
            <el-input class="role-search-box"
                      placeholder="输入关键字进行过滤"
                      size="medium"
                      v-model="filterText2"
            >
              <i style="line-height:36px;" class="iconfont iconsearch" slot="suffix"></i>
            </el-input>
            <el-tree
                    :data="company"
                    show-checkbox
                    node-key="id"
                    default-expand-all
                    :default-checked-keys="myCompayIds"
                    :props="companyProps"
                    :filter-node-method="filterNode2"
                    ref="tree2"
            ></el-tree>
          </div>

        </el-tab-pane>
      </el-tabs>
      <!-- 权限结束 -->
    </div>

    <div class="page-form-btn">
      <el-button @click="back">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
export default {
  name: "userRole",
  data() {
    return {
      userId:this.$route.query.id,
      user:{},
      roles:'',
      filterText: "",
      filterText1: "",
      filterText2: "",
      activeName: "first",
      sociacAddrs: [
        {
          id: 1,
          addrName: "全部参保地",
          children: []
        }
      ],
      accfundAddrs: [
        {
          id: 1,
          addrName: "全部参保地",
          children: []
        }
      ],

      company: [
        {
          id: 1,
          name: "全部公司",
          children: []
        }
      ],
      defaultProps: {
        children: "children",
        label: "addrName"
      },
      companyProps: {
        children: "children",
        label: "name"
      },
      myCompayIds:[],
      socialIds:['0c0509de-b634-4350-914d-add9ae2320c1'],
      accfundIds:[],

    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    filterText1(val) {
      this.$refs['tree1'].filter(val);
    },
    filterText2(val) {
      this.$refs['tree2'].filter(val);
    }
  },
  created(){
    this.getUser();
    this.getSocialAddr();
    this.getAccfundAddr();
    this.getCompany();
    this.getRoleIds();
  },
  methods: {
    getUser(){
      Http.api.get("user/"+this.$route.query.id).then(res => {
        this.user =res.data;
      });
    },
    getRoleIds(){
      Http.api.get("/role/user/data/"+this.userId+"?type=0").then(res => {
      //  this.socialIds.push(res.data);
        this.$refs['tree'].setCheckedKeys(res.data);
      });
      Http.api.get("/role/user/data/"+this.userId+"?type=1").then(res => {
       // this.accfundIds= res.data;
        this.$refs['tree1'].setCheckedKeys(res.data);

      });
      Http.api.get("/role/user/data/"+this.userId+"?type=2").then(res => {
        //this.myCompayIds= res.data;
        this.$refs['tree2'].setCheckedKeys(res.data,false);

      });
    },
    getCompany: function() {
      Http.api.get("company/all").then(res => {
        this.company[0].children = res.data;
      });
      },
    //搜索权限
    filterNode(value, data) {
      if (!value) return true;
      return data.addrName.indexOf(value) !== -1;
    },
    filterNode1(value, data) {
      if (!value) return true;
      return data.addrName.indexOf(value) !== -1;
    },
    filterNode2(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 保存
    save() {
      let socialAddr = this.$refs['tree'].getCheckedNodes();
      let accfundAddr = this.$refs['tree1'].getCheckedNodes();
      let comp = this.$refs['tree2'].getCheckedNodes();
      let ids = new Array();
      socialAddr.forEach((item)=>{
        ids.push({
          dataValue:item.id,
          dataType:0
        })
      });
      accfundAddr.forEach((item)=>{
        ids.push({
          dataValue:item.id,
          dataType:1
        })
      });
      comp.forEach((item)=>{
        ids.push({
          dataValue:item.id,
          dataType:2
        })
      });

      Http.api.post("role/user/data/"+this.userId,ids).then((res)=>{
        this.$message({
          message: "数据已保存",
          center: true,
          iconClass: "iconfont iconcheck",
          customClass: "custom-message"
        });
      })

    },
    back(){
      this.$router.go(-1);
    },
    getSocialAddr(){
      Http.api.get("/addr/role?type=0").then((res)=>{
        this.sociacAddrs[0].children = res.data;
      })
    },
    getAccfundAddr(){
      Http.api.get("/addr/role?type=1").then((res)=>{
        this.accfundAddrs[0].children = res.data;
      })
    }

  }
};
</script>